<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>会员登录</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
		<script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/bootstrap-3.1.1.min.js" type="text/javascript"></script>
		<!-- 引入自定义css文件 style.css -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
		<style>
			body {
				margin-top: 20px;
				margin: 0 auto;
			}
			
			.carousel-inner .item img {
				width: 100%;
				height: 300px;
			}
			
			.container .row div {
				/* position:relative;
	 float:left; */
			}
			
			font {
				color: #3164af;
				font-size: 18px;
				font-weight: normal;
				padding: 0 10px;
			}
		</style>
	</head>

	<body>

		
			<jsp:include page="head.jsp"/>


		<div class="container">
			<div class="row">

				<div style="margin:0 auto; margin-top:10px;width:950px;">
					<strong style="font-size:16px;margin:5px 0;">订单详情</strong>
					<table class="table table-bordered">
						<tbody>
							<tr class="warning">
								<th>图片</th>
								<th>商品</th>
								<th>价格</th>
								<th>数量</th>
								<th>小计</th>
								<th>操作</th>
							</tr>

							<c:forEach items="${items}" var="item">
								<tr class="active die" id="item.product.name">
									<td width="60" width="40%">
										<input type="hidden" name="id" value="22">
										<img src="${pageContext.request.contextPath}/${item.product.image}" width="70" height="60">
									</td>
									<td width="30%">
										<a target="_blank">${fn:substring(item.product.name,0,10 )}..</a>
									</td>
									<td width="20%">
										<span>${item.product.shopPrice}</span>
									</td>
									<td width="10%">
										<span>${item.count}</span>
									</td>
									<td width="15%">
										<span class="subtotal">${item.price}</span>
									</td>
									<td>
										<a href="javascript:;" class="delete" id="${item.product.pid}">删除</a>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>

			<div style="margin-right:130px;">
				<div style="text-align:right;">
					<em style="color:#ff6600;">

			</em> 赠送积分: <em style="color:#ff6600;" id="code">${total / 50}</em>&nbsp; 商品金额: <strong style="color:#ff6600;" >￥<span id="money">${total}</span>元</strong>
				</div>
				<div style="text-align:right;margin-top:10px;margin-bottom:10px;">
					<a href="${pageContext.request.contextPath}/car/deletecar.do?uid=${sessionScope.user.uid}" id="clear" class="clear">清空购物车</a>
					<a href="#">
						<input type="button" width="100" id="sub" value="提交订单" name="submit" border="0" style="background: url('${pageContext.request.contextPath}/images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
						height:35px;width:100px;color:white;">
					</a>
				</div>
			</div>

		</div>

		<jsp:include page="foot.jsp"/>

	</body>
	<script>

		$(".delete").click(function (e) {
		    var pid = $(this).attr("id");
			$.ajax({
				url:"${pageContext.request.contextPath}/car/deletesingle.do",
                data:{
                	pid:pid,
					uid:"${pageContext.request.contextPath}${sessionScope.user.uid}"
				},
				success:function (d) {
					if(d.msc == 1){
						document.getElementById(pid).parentNode.parentNode.remove();
                    }
                }
			})

        })

    var c = 2;
    $("#sub").click(function () {
      $.ajax({
        url: "${pageContext.request.contextPath}/order/addOrder.do",
        success: function (d) {
//自动消失的弹窗


          if (d.status == 0) {
            var windowWidth = $(window).width();
            var tipsDiv = '<div class="tipsClass">添加订单成功</div>';
            $('body').append(tipsDiv);
            $('div.tipsClass').css({
              'top': 130 + 'px',
              'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
              'position': 'absolute',
              'padding': '10px 16px',
              'background': '#8FBC8F',
              'font-size': 18 + 'px',
              'margin': '0 auto',
              'text-align': 'center',
              'width': '350px',
              'height': 'auto',
              'color': '#fff',
              'opacity': '0.8'
            }).show();
            setTimeout(
                function () {
                  $('div.tipsClass').fadeOut();
                }, (1.5 * 1000));
            window.setInterval(function () {
              c--;
              if (c <= 0) {
                console.log(d.data.oid);
                location.href = "${pageContext.request.contextPath}/order/orderPay.do?oid="
                    + d.data.oid;
              }
            }, 1000);
          }
          if(d.status == 1){
            var windowWidth = $(window).width();
            var tipsDiv = '<div class="tipsClass">商品库存不足</div>';
            $('body').append(tipsDiv);
            $('div.tipsClass').css({
              'top': 130 + 'px',
              'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
              'position': 'absolute',
              'padding': '10px 16px',
              'background': 'red',
              'font-size': 18 + 'px',
              'margin': '0 auto',
              'text-align': 'center',
              'width': '350px',
              'height': 'auto',
              'color': '#fff',
              'opacity': '0.8'
            }).show();
            setTimeout(
                function () {
                  $('div.tipsClass').fadeOut();
                }, (1.5 * 1000));
          }
        }
      })
    })

	</script>

</html>